<template>
	<view class="container">
		<customNavigation title="阅读公告" src="../static/images/nav_icon_back.png" src2="../static/images/nav_icon_logo.png" color="white" background="#32A238"></customNavigation>
		<view class="main">
			<view class="msgBox" v-if="tapAdmin!==true">
				<view class="title">
					<image src="../../static/images/home_icon_glgg.png" mode=""></image>
				</view>
				<view class="msgContent">
					<swiper class="msgContent" :indicator-dots="true" :autoplay="true" :interval="9000" indicator-active-color="rgba(50, 162, 56, 1)" indicator-color="rgba(50, 162, 56, 0.5)" :duration="1000">
						<swiper-item v-for="item in list1" :key="item">
							<view class="swiper-item">
								<view class="msgItem" v-for="childItem in item" :key="childItem" @click="toNotice(childItem.id,childItem.url)">
									<view class="spot" v-if="childItem"></view>
									<view class="msgText">
										{{childItem.title||""}}
									</view>
									<view class="time">
										{{childItem.dtTime||""}}
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="msgBox2" v-if="tapAdmin!==true">
				<view class="title">
					<image src="../../static/images/home_icon_zh.png" mode=""></image>
				</view>
				<view class="msgContent">
					<swiper class="msgContent" :indicator-dots="true" :autoplay="true" :interval="9000" indicator-active-color="rgba(50, 162, 56, 1)" indicator-color="rgba(50, 162, 56, 0.5)" :duration="1000">
						<swiper-item v-for="item in list2" :key="item">
							<view class="swiper-item">
								<view class="msgItem" v-for="childItem in item" :key="childItem" @click="toNotice(childItem.id,childItem.url)">
									<view class="spot" v-if="childItem"></view>
									<view class="msgText">
										{{childItem.title||""}}
									</view>
									<view class="time">
										{{childItem.dtTime||""}}
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<scroll-view class="noticeBox" scroll-x="true" scroll-y="true">
				<view class="title">
					{{noticeDetail.title||' '}}
				</view>
				 <u-parse :content="noticeDetail.content||' '" @preview="preview"></u-parse>
			</scroll-view>
			<view class="btnList">
				<view class="btnTop">
					<view class="btnItem" @tap.stop="pre">
						上一条
					</view>
					<view class="btnItem2" v-if="noticeDetail.IsAffirm==true" @click="subNotice(noticeDetail.id)">
						确认
					</view>
					<view class="btnItem2" @tap.stop="next">
						下一条
					</view>
				</view>
				<view class="btnBottom" @click="toRelease">
					发布
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import customNavigation from "@/components/custom-navigation.vue"
	import uParse from '@/components/u-parse/u-parse.vue'
	import * as api from "../../utils/controller.js"
	export default {
		components:{
			customNavigation,
			uParse
		},
		data() {
			return {
				list1:[],
				list2:[],
				allList:[],
				noticeDetail:"",
				selectIndex:0
			}
		},
		mounted() {
			this.getNoticeList()
			
		},
		methods: {
			//跳转公告发布页
			toRelease(){
				uni.navigateTo({
					url:"/pages/release/release"
				})
			},
			
			//上一页
			pre(){
				if(this.selectIndex<=0){
					
				}else{
					this.selectIndex=this.selectIndex-1
					this.getNoticeDetail(this.allList[this.selectIndex].id,this.allList[this.selectIndex].url)
				}
			},
			
			//确认公告
			subNotice(id){
				let that=this
				api.AffirmNotice({ID:id}).then(res=>{
					uni.showToast({
						icon:"none",
						title:"操作成功",
						duration:1500
					})
					this.selectIndex=0
					that.getNoticeList()
				})
			},
			
			//下一页
			next(){
				if(this.selectIndex>=this.allList.length-1){
					
				}else{
					this.selectIndex=this.selectIndex+1
					this.getNoticeDetail(this.allList[this.selectIndex].id,this.allList[this.selectIndex].url)
				}
			},
			
			//跳转公告详情
			toNotice(id,url){
				if(!url){
					this.getNoticeDetail(id,url)
				}else{
					this.toH5(url)
				}
			},
			
			//跳转h5
			toH5(url){
				let jmUrl=encodeURIComponent(url)
				uni.navigateTo({
					url:"/pages/h5Link/h5Link?url="+jmUrl
				})
			},
			
			//获取公告和知会列表
			getNoticeList(){
				let list1=[]	//公告
				let list2=[]	//知会
				api.GetNoticeList().then(res=>{
					this.allList=res.data
					res.data.forEach(item=>{
						if(item.noticeType==1){
							item.dtTime=item.dtTime.split(" ")[0]
							list1.push(item)
						}else{
							item.dtTime=item.dtTime.split(" ")[0]
							list2.push(item)
						}
					})
				let length1=parseInt(list1.length/4)
				let yu1=list1.length%4
				let num1=0
				let	length2=parseInt(list2.length/3)
				let yu2=list2.length%3
				let num2=0
				let fzList1=[]
				let fzList2=[]
				//公告
				for(let i=0;i<list1.length;i=i+4){
					let list=[]
					list.push(list1[i])
					list.push(list1[i+1])
					list.push(list1[i+2])
					list.push(list1[i+3])
					fzList1.push(list)
					num1=num1+4
				}
				// if(yu1!=0){
				// 	let list=[]
				// 	for(let i=list1.length-yu1;i<list1.length;i++){
				// 		list.push(list1[i])
				// 	}
				// 	fzList1.push(list)
				// }
				
				//知会
				for(let i=0;i<list2.length;i=i+3){
					let list=[]
					list.push(list2[i])
					list.push(list2[i+1])
					list.push(list2[i+2])
					fzList2.push(list)
					num1=num1+4
				}
				// if(yu2!=0){
				// 	let list=[]
				// 	console.log(list2.length)
				// 	for(let i=list2.length-yu2;i<list2.length;i++){
				// 		list.push(list2[i])
				// 	}
				// 	fzList2.push(list)
				// }
				this.list1=fzList1
				this.list2=fzList2
				if(this.allList){
					this.getNoticeDetail(this.allList[0].id)
				}
				})
			},
		
			//获取公告详情
			getNoticeDetail(id,url){
				// if(!url){
					api.GetNoticeDetail({ID:id}).then(res=>{
						this.noticeDetail=res.data
					})
				// }else{
				// 	this.toH5(url)
				// }
			}
		}
	}
</script>

<style lang="less">
.container{
	width: 100%;
	height: auto;
	.main{
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 11vh;
		.msgBox{
			width: 686rpx;
			height: 395rpx;
			background: #FFFFFF;
			border-radius: 22rpx;
			position: relative;
			.title{
				width: 100%;
				height: 98rpx;
				padding: 0 30rpx 0 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #F5F5F5;
				image{
					width: 205rpx;
					height: 42rpx;
				}
			}
			.msgContent{
				width: 100%;
				height: 293rpx;
				.swiper-item{
					width: 100%;
					height: 293rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 30rpx;
					box-sizing: border-box;
					.msgItem{
						width: 100%;
						height: 52rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						box-sizing: border-box;
						.spot{
							width: 14rpx;
							height: 14rpx;
							background: #999999;
							border-radius: 50%;
						}
						.msgText{
							width: 388rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.time{
							width: 170rpx;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}
				}
			}
			.msgContent2{
				width: 100%;
				height: 293rpx;
				.swiper-item{
					width: 100%;
					height: 293rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 30rpx;
					box-sizing: border-box;
					.msgItem{
						width: 100%;
						height: 52rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						box-sizing: border-box;
						.spot{
							width: 14rpx;
							height: 14rpx;
							background: #999999;
							border-radius: 50%;
						}
						.msgText{
							width: 388rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.time{
							width: 170rpx;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}
				}
			}
		}
		.msgBox2{
			width: 686rpx;
			height: 395rpx;
			background: #FFFFFF;
			border-radius: 22rpx;
			position: relative;
			.title{
				width: 100%;
				height: 98rpx;
				padding: 0 30rpx 0 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #F5F5F5;
				image{
					width: 205rpx;
					height: 42rpx;
				}
			}
			.msgContent{
				width: 100%;
				height: 243rpx;
				.swiper-item{
					width: 100%;
					height: 293rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 30rpx;
					box-sizing: border-box;
					.msgItem{
						width: 100%;
						height: 52rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						box-sizing: border-box;
						.spot{
							width: 14rpx;
							height: 14rpx;
							background: #999999;
							border-radius: 50%;
						}
						.msgText{
							width: 388rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.time{
							width: 170rpx;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}
				}
			}
			.msgContent2{
				width: 100%;
				height: 293rpx;
				.swiper-item{
					width: 100%;
					height: 293rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 30rpx;
					box-sizing: border-box;
					.msgItem{
						width: 100%;
						height: 52rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						box-sizing: border-box;
						.spot{
							width: 14rpx;
							height: 14rpx;
							background: #999999;
							border-radius: 50%;
						}
						.msgText{
							width: 388rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.time{
							width: 170rpx;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}
				}
			}
		}
		.noticeBox{
			width: 100%;
			height: auto;
			padding-left: 30rpx;
			padding-right: 30rpx;
			box-sizing: border-box;
			.title{
				width: 100%;
				text-align: center;
				margin-bottom: 74rpx;
				font-size: 36rpx;
				font-family: PingFangSC;
				font-weight: 500;
				color: #2A2A2A;
			}
			.noticeContent{
				font-size: 28rpx;
				font-family: PingFangSC;
				font-weight: 400;
				color: #2A2A2A;
			}
		}
		.btnList{
			width: 687rpx;
			height: auto;
			margin-top: 95rpx;
			margin-bottom: 76rpx;
			.btnTop{
				width: 100%;
				height: auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.btnItem{
					width: 222rpx;
					height: 72rpx;
					background: rgba(50, 162, 56, 0.1);
					border: 2rpx solid #32A238;
					border-radius: 10rpx;
					text-align: center;
					line-height: 72rpx;
					font-size: 28rpx;
					font-family: PingFangSC;
					font-weight: 400;
					color: #32A238;
					box-sizing: border-box;
				}
				.btnItem2{
					width: 222rpx;
					height: 72rpx;
					background: #32A238;
					border-radius: 10rpx;
					font-size: 28rpx;
					font-family: PingFangSC;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
					line-height: 72rpx;
				}
			}
			.btnBottom{
				width: 100%;
				height: 72rpx;
				background: #32A238;
				border-radius: 10rpx;
				margin-top: 30rpx;
				font-size: 28rpx;
				font-family: PingFangSC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 72rpx;
			}
		}
	}
}
</style>
